<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // // 1.创建对象
    // const xhr = new XMLHttpRequest();
    // // 2. 初始化
    // xhr.open("GET", "https://api.apiopen.top/getJoke")
    // // 3. 发送请求
    // xhr.send()
    // // 4. 绑定事件，处理响应结果
    // xhr.onreadystatechange = function () {
    //   if (xhr.readyState === 4) {
    //     if (xhr.status >= 200 && xhr.status < 300) {    // 表示成功
    //       console.log(xhr.response)
    //     } else {
    //       console.log("请求失败")
    //     }
    //   }
    // }


    // 使用 Promise 封装
    const p = new Promise((resolve, reject) => {
      // 1.创建对象
      const xhr = new XMLHttpRequest();
      // 2. 初始化
      xhr.open("GET", "https://api.apiopen.top/getJoke")
      // 3. 发送请求
      xhr.send()
      // 4. 绑定事件，处理响应结果
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {    // 表示成功
            resolve(xhr.response)
          } else {
            reject(xhr.status)
          }
        }
      }
    });
    // 编写成功或失败的回调函数
    p.then(function (value) {
      console.log(value);
    }, function (reason) {
      console.log(reason);
    })

  </script>
</body>

</html>